<template>
  <view class="container">
    <!-- 描述 -->
    <view class="describe">
      <view class="container_input">
        <textarea class="container_input_box" v-model="remarks" maxlength="200"
          placeholder-style="color:rgba(61, 61, 61, 0.5)" placeholder="请填写举报理由..." @input="textareaInput" />
        <text class="container_input_abso">{{textareaList}}/200</text>
        <!-- <image class="minImage" src="/static/picture.png" mode="widthFix"></image> -->
        <!-- <image class="minImage minImage1" src="/static/invite.png" mode="widthFix"></image> -->
      </view>
    </view>

    <van-checkbox-group :value="result" @change="onChange">
      <van-cell-group>
        <van-cell v-for="(item,i) in list" :key="i" :title="item.dictValue" value-class="value-class" clickable
          :data-index="i" @click="toggle">
          <van-checkbox :class="'checkboxes-' + i" :name="item.dictValue" checked-color="rgba(253, 211, 56, 1)" />
        </van-cell>
      </van-cell-group>
    </van-checkbox-group>


    <view class="cell-phone">
      <van-field :value="phone" label="联系方式" maxlength="11" placeholder="请输入联系方式" input-align="right"
        @input="InputClick" />
    </view>

    <!-- 按钮 -->
    <view class="container_btn">
      <button type="default" @click="addPublished">立即发布</button>
    </view>
  </view>
</template>

<script>
  import {
    questionType,
    addquestionType
  } from '@/api/report.js'
  export default {
    data() {
      return {
        remarks: '',
        textareaList: 0,
        list: [],
        result: [],
        phone: '',
        id: 0,
        associatedType: 0
      };
    },
    onLoad(option) {
      this.id = option.id
      this.associatedType = option.associatedType
      questionType().then(res => {
        res.data.forEach(item => {
          this.list.push(item)
        })
      })
    },
    methods: {
      textareaInput(e) {
        // console.log(e)
        this.textareaList = e.detail.cursor
        this.remarks = e.detail.value.trim()
      },
      onChange(event) {
        // console.log(event)
        this.result = event.detail
      },
      toggle(event) {
        const {
          index
        } = event.currentTarget.dataset;
        const checkbox = this.selectComponent(`.checkboxes-${index}`);
        checkbox.toggle();
      },
      InputClick(e) {
        // console.log(e)
        this.phone = e.detail
      },
      addPublished() {
        const queryType = {
          questionType: this.result.join(','),
          remarks: this.phone,
          question: this.remarks,
          associatedId: this.id,
          associatedType: this.associatedType
        }
        // console.log(queryType)

        addquestionType(queryType).then(res => {
          // console.log(res)
          uni.switchTab({
            url: '/pages/tabbar/addition/index'
          })
          this.$util.Tips({
            title: '举报成功！'
          })
        })
      }
    }
  }
</script>

<style lang="scss">
  .container {
    padding-bottom: 160rpx;
  }


  .cell-phone {
    padding: 0 24rpx;

    /deep/ .van-cell {
      padding: 40rpx 0 !important;
      align-items: center;
      width: 100% !important;
      font-size: 30rpx !important;
      overflow: hidden;
    }

    /deep/ .van-cell__value {
      color: rgba(61, 61, 61, 1) !important;
    }
  }

  /deep/ .van-checkbox {
    justify-content: flex-end;
  }

  .describe {
    padding: 43rpx 24rpx;

    .describe_title {
      color: rgba(61, 61, 61, 1);
    }

    .container_input {
      position: relative;
      width: 704rpx;
      height: 380rpx;
      background-color: rgba(247, 247, 247, 1);
      border-radius: 10rpx;
      margin-top: 20rpx;
      padding: 29rpx 36rpx;
      box-sizing: border-box;
      font-size: 26rpx;


      .container_input_box {
        height: 260rpx !important;
      }

      .container_input_abso {
        position: absolute;
        bottom: 30rpx;
        right: 50rpx;
        color: rgba(61, 61, 61, 0.5);
      }

      .minImage {
        position: absolute;
        bottom: 30rpx;
        left: 50rpx;
        width: 40rpx;
        height: 36rpx;
      }

      .minImage1 {
        left: 150rpx;
      }
    }
  }

  .container_btn {
    position: fixed;
    bottom: 0rpx;
    width: 100%;
    padding: 0 24rpx;
    box-sizing: border-box;
    background-color: #fff;

    button {
      height: 96rpx;
      line-height: 96rpx;
      background-color: rgba(253, 211, 56, 1);
      border-radius: 226rpx;
      margin: 30rpx 0;
      font-size: 36rpx;
      font-weight: 500;
    }

    .container_btn_box {
      background-color: rgba(253, 211, 56, 0.5);
    }
  }
</style>
